

<template>
<div>
  <el-row>
    <el-col :span="23" :offset="1" style="margin-bottom: 30px;margin-top: 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/algor' }" class="bread"><i class="el-icon-location-outline"></i>算法管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/sampleItem' }" class="bread">样本集合</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="5" >
      <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          accordion
          :load="loadNode"
          @node-click="treeOnClick"
          lazy
          ref="tree">
      </el-tree>
    </el-col>

    <div v-if="sampleItem.id===''">

    </div>
    <div v-else>

      <el-col :span="18" >
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <img  :src="sampleItem.sampleItemPath" class="image" alt="图片未找到">
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table
                height="350px"
                :data="tableData"
                fit
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="序号"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="jiancename"
                  label="检测项">
              </el-table-column>
              <el-table-column
                  prop="jiancenumber"
                  label="检测值">
              </el-table-column>
              <el-table-column
                  prop="jiancedeep"
                  label="检测深度">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </div>

  </el-row>
</div>
</template>

<script>
import {
  getSampleItemListBySampleSetId,
  getSampleResultPageBySampleItemId,
  getSampleSetList
} from "@/api/sample/sampleApi";

export default {
  data() {
    return {
      currentDate: new Date(),
      filterText: '',
      sampleItem: {
        id:"",
        sampleItemName:"",
        sampleItemPath:"",
        sampleSetId: ""
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf',
      },
      tableData: [],
    };
  },
  methods:{
    getSampleSetList(){
      getSampleSetList({}).then(res=>{
        let sampleSetList=res.data;
        for (const sampleSetListElement of sampleSetList) {
          let item={
            id:"",
            label:"",
            leaf:false
          }
          item.id=sampleSetListElement.id
          item.label=sampleSetListElement.sampleSetName;
          this.treeData.push(item)
        }
      })
    },
    loadNode(node, resolve) {
      if(node.level>0){
        getSampleItemListBySampleSetId(node.data.id).then(res => {
          let sampleItemList=res.data;
          let leafList=[]
          for (const sampleItemListElement of sampleItemList) {
            let item={
              id:"",
              label:"",
              leaf:true
            }
            console.log("***&&^*((&&&")
            console.log(sampleItemListElement)
            item.id=sampleItemListElement.id;
            item.sampleSetId=sampleItemListElement.sampleSetId;
            item.label=sampleItemListElement.sampleItemName;
            item.sampleItemPath=sampleItemListElement.sampleItemPath;
            leafList.push(item)
          }
          resolve(leafList)
        })
      }
    },
    getSampleResultList(){
      let data ={
        sampleItemId:this.sampleItem.id,
        pageNum:1,
        pageSize:100
      }
      getSampleResultPageBySampleItemId(data).then(res=>{
        console.log(res)
        this.tableData=res.rows;
      })
    },
    treeOnClick(a,node,c){
      if(node.isLeaf){
        console.log(node)
        this.sampleItem.id=node.data.id;
        this.sampleItem.sampleItemName=node.data.label;
        this.sampleItem.sampleItemPath=node.data.sampleItemPath;
        this.sampleItem.sampleSetId=node.data.sampleSetId;
      }
      //
      this.getSampleResultList();
    }
  },
  created() {
    this.getSampleSetList();
    getSampleItemListBySampleSetId(7).then(res => {
      console.log("****&&&&&&&&")
      console.log(res)})
  }
}
</script>


<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>